<template>
	<div class="a-tree-expansion">
		<template v-for="(item,index) in data">
			<q-expansion-item
				v-if="item[children] && item[children].length > 0"
				expand-separator
				:icon="item.icon"
				:label="item[label]"
				:caption="item.caption"
				:key="index"
				default-opened
				:header-inset-level="insetLevel * 0.5"
				:group="getGroup(item.pid)"
			>
				<a-tree-expansion
					:data="item[children]"
					:children="children"
					:label="label"
					:group="group"
					@item-selected="itemSelected"
					:inset-level="insetLevel + 1"/>
			</q-expansion-item>
			<q-item
				v-else
				:to="item.url"
				:icon="item.icon"
				:key="index"
				:inset-level="insetLevel * 0.5"
				@click="itemSelected"
			>
				<q-item-section>
					<span class="q-item-label">{{ item[label] }}</span>
				</q-item-section>
			</q-item>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'ATreeExpansion',
		props: {
			data: {
				type: Array,
				default: () => [],
			},
			insetLevel:{
				type:Number,
				default:0
			},
			children: {
				type: String,
				default: 'children'
			},
			label: {
				type: String,
				default: 'label'
			},
			group: {
				type: Boolean,
				default: false
			}
		},
		methods:{
			getGroup(id){
				return this.group ? 'group-' + id : '';
			},
			itemSelected(item){
				console.log(item)
				this.$emit('item-selected', item)
			}
		}
	};
</script>
